<template>
  <div class="user">
    <div class="user-portrait">
      <div class="wrap">
        <div class="left">
          <img class="portrait" src="https://img.yzcdn.cn/vant/cat.jpeg">
          <div class="span-wrap">
            <span>{{userInfo.nickName || "我是某某某"}}</span>
            <span class="role">当前角色：{{roleName}}</span>
          </div>
        </div>
        <router-link to="/editPassword">
          <div class="right">
            <span>修改密码</span>
            <img src="../../assets/images/mine/edit.png" class="edit">
          </div>
        </router-link>
      </div>
      <!-- <div class="score">当前积分 {{score}}</div> -->
    </div>
    <div class="location">
      <div class="account">
        <span>余额 {{account || 0}}</span>
        <div class="withDraw" @click="withDraw">提现</div> 
      </div>
      <div class="account">
        <span>积分余额 {{score}}</span>
      </div>
      <div class="user-group">
        <div class="title">我的订单</div>
        <div class="user-links">
            <div class="links_box" span="6" @click="orderPage(0)">
              <img src="../../assets/images/mine/undone.png">
              <div>待付款</div>
            </div>
            <div class="links_box" span="6" @click="orderPage(1)">
              <img src="../../assets/images/mine/done.png">
              <div>已完成</div>
            </div>
        </div>
      </div>
      <div class="li"  @click="address">
        <img src="../../assets/images/mine/place.png">
        <span>客户地址</span>
      </div>
      <div class="li" @click="toOrder('own')">
        <img src="../../assets/images/mine/client.png">
        <span>客户订单</span>
      </div>
      <!-- <div class="li" @click="toOrder('recommend')">
        <img src="../../assets/images/mine/client.png">
        <span>客户推荐订单</span>
      </div> -->
      <router-link to="/bill">
        <div class="li">
          <img src="../../assets/images/mine/bill.png">
          <span>账单</span>
        </div>
      </router-link>
      <div class="out-login" @click="outLogin">
        <van-cell title="退出登录"/>
      </div>
    </div>
    <navigate />
  </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';
import { withDraw, findAccount, getCurrentUser, findScoreAccount } from "../../api/page.js";
Vue.use(Dialog)
export default {
  data(){
    return{
      data:{},
      userInfo:{},
      roleName: "",
      token:"",
      account: 0,
      score: 0
    }
  },
  created(){
  if(window.localStorage.getItem("token")){
      this.token = window.localStorage.getItem("token")
    }
    this.getAccount()
    this.getCurrentUser()
    this.findScoreAccount()
  },
  methods:{
    // 积分
    findScoreAccount() {
      findScoreAccount().then(res => {
        this.score = res.data.accountAmt
      })
    },
    // 当前账户信息
    getCurrentUser() {
      getCurrentUser().then(res => {
        this.userInfo = res.data
        let str = res.data.userTypeName + res.data.userLevel 
        res.data.sysUserRoleResultDtos.forEach( v => {
          if(v.checked){
           str += '、' + v.roleName
          }
        })
        this.roleName = str
      })
    },
    // 获取账户余额
    getAccount() {
      findAccount().then(res => {
        this.account = res.data.accountAmt
      })
    },
    // 跳转登录页
    login(){
      this.$router.push({name:"login"})
    },
    outLogin() {
      localStorage.removeItem("token")
      this.$router.push({name:"login"})
    },
    // 客户订单
    toOrder(str) {
      this.$router.push({name:"userList", query: {from: str}})
    },
    // 客户地址
    address(){
      this.$router.push({name:"addressList"})
    },
    // 提现
    withDraw() {
      if (this.account === 0) {
        this.$toast("最小提现金额为0.01")
        return
      }
      Dialog.confirm({
        title: '提现',
        message: '确定要提现嘛'
      }).then(() => {
        withDraw({
          withDrawAmt: this.account,
          withDrawReason: ""
        }).then(res => {
          this.getAccount()
          this.$toast({type: "success", message: res.retMsg})
        })
      }).catch(() => {
        // on cancel
      });
    },
    // 跳转相关订单页
    orderPage(state){
      if(this.token==""){
        this.login() 
      }else{
        this.$router.push({name:"userOrder", query:{type:state}})
      }

    }
  }
};
</script>

<style lang="less" scoped>
.user{
  background-color: #F0F2F5;
  padding-bottom: 0.533333rem;
  .out-login {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    width: 9.2rem;
    height: 1.333333rem;
    border-radius: 0.266667rem;
    box-sizing: border-box;
    text-align: center;
    margin: 0.266667rem auto;
  }
  .li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    width: 9.2rem;
    height: 1.333333rem;
    border-radius: 0.266667rem;
    box-sizing: border-box;
    padding-left: 0.4rem;
    margin: 0.266667rem auto;
    img {
      width: 0.48rem;
      height: 0.48rem;
    }
    span {
      font-size: 16px;
      color: #333333;
      margin-left: 0.266667rem;
    }
  }
}
.location {
  position: relative;
  top: -0.88rem;
}
.account {
  width: 9.2rem;
  height: 1.76rem;
  border-radius: 0.266667rem;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 0.266667rem;
  box-sizing: border-box;
  padding: 0 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #FF5E1B;
    font-size: 0.666667rem;
  }
  .withDraw {
    width: 2.133333rem;
    height: 0.8rem;
    color: #fff;
    background: #ff5e1b;
    line-height: 0;
    font-size: 0.426667rem;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.user-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  width: 9.2rem;
  height: 3.146667rem;
  box-sizing: border-box;
  padding: 0.4rem;
  background: #fff;
  margin: 0.266667rem auto;
  border-radius: 0.266667rem;
  .title {
    color: #333333;
    font-size: 0.426667rem;
    font-weight: bold;
  }
  .user-links{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

  .user-portrait{
    height: 3.6rem;
    box-sizing: border-box;
    padding: 0.653333rem 0.4rem 0 0.4rem;
    background: orange;
    .score {
      font-size: 0.426667rem;
      color: #fff;
      margin-top: 0.266667rem;
      padding-left: 0.4rem;
    }
    .wrap {
      height: 1.466667rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .portrait {
          width: 1.466667rem;
          height: 1.466667rem;
          margin-right: 0.266667rem;
          border-radius: 50%;
        }
        .span-wrap {
          display: flex;
          height: 100%;
          justify-content: space-around;
          flex-direction: column;
          .role {
            font-size: 0.4rem;
          }
        }
        span {
          color: #FFFFFF;
          font-size: 0.48rem;
          font-weight: bold;
        }
      }
      .right {
        background: #fff;
        width: 2.133333rem;
        height: 0.56rem;
        border-radius: 0.266667rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span {
          font-size: 0.32rem;
          color: #333333;
        }
        img {
          width: 0.32rem;
          height: 0.293333rem;
        }
      }
    }
  } 
  .user-links {
    font-size: 0.32rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .links_box{
      text-align: center;
      margin-right: 1.066667rem;
      img {
        width: 0.76rem;
        height: 0.666667rem;
        margin-bottom: 0.266667rem;
      }
    }
    .van-icon {
      position: relative;
      width: 0.64rem;
      font-size: 0.64rem;
      margin-bottom: .08rem;
    }
  }
.user_box{
  display: inline-block;
  text-align: center;
}
</style>